import 'package:flutter/material.dart';


class LeftRightListDemoPage extends StatefulWidget {
  @override
  _LeftRightListDemoPageState createState() => _LeftRightListDemoPageState();
}

class _LeftRightListDemoPageState extends State<LeftRightListDemoPage> {
  List<String> _btnTitles = List();
  List<String> _contents = List();
  var btnIndex = 0;
  ScrollController _contentScrollController = ScrollController();

  @override
  void dispose() {
    super.dispose();
    _contentScrollController.dispose();
  }

  @override
  void initState() {
    super.initState();
    _btnTitles = List<String>.generate(10, (index){
      return 'button$index';
    });

    _contents = List<String>.generate(100, (index){
      return 'content $index';
    });

    _contentScrollController.addListener((){
      var value = _contentScrollController.position.pixels;
      value = value / 500.0;
      var index = value.round().toInt();
      if (btnIndex != index) {
        setState(() {
          btnIndex = index;
        });
      }
      print('index = $index');
    });
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text('左右列表Demo',style: TextStyle(color: Colors.white,fontSize: 18),),
        ),
        body: Container(
          width: double.infinity,
          height: double.infinity,
          child: Row(
            children: <Widget>[
              Container(
                width: 100,
                child: ListView.builder(
                  itemBuilder: (context,index){
                    return  GestureDetector(
                      onTap: (){
                        double _position =  index * (100 * 50 /10.0);
                        _contentScrollController.animateTo(
                            _position,
                            duration: Duration(milliseconds: 300),
                            curve: Curves.ease);
                      },
                      child: Container(
                        constraints: BoxConstraints.expand(width:100.0,height:100.0),
                        margin: EdgeInsets.all(5.0),
                        color: index == btnIndex? Colors.blue : Colors.red,
                        child: Center(
                          child: Text(_btnTitles[index]),
                        ),
                      ),
                    );
                  },
                  itemCount: _btnTitles.length,),

              ),
              Expanded(
                  child: ListView.builder(
                    controller: _contentScrollController,
                    itemExtent: 50.0,
                    itemBuilder: (context,index){
                      return ListTile(
                        title: Text(_contents[index]),
                      );
                    },
                    itemCount: _contents.length,
                  )
              )
            ],
          ),
        )
    );
  }
}

